<template>
  <div :id="'echarts-basic-line-' + id" class="echarts-basic-line"></div>
</template>

<script>

  import { isArray } from '@/utils/public.js';
  import EchartsMixin from '@/views/child/admin/echart/echartsComps/mixin/echarts-mixin.js';

  export default {
    name: 'basicLine',
    mixins: [EchartsMixin],
    props: {
      /** eData 数据结构
       * xName: ''  // x轴 name
       * yName: ''  // y轴 name
       * xData: []  // x轴 label 数据
       * yData: []  // y轴 数据组 { name: '', data: [] }
       */
      id: String,
      eData: {
        type: Object,
        default: null,
      },
      title: {
        type: String,
        default: null,
      },
      xLabelRotate: {
        type: Boolean,
        default: false,
      },
      yLabelRotate: {
        type: Boolean,
        default: false,
      },
      barWidth: {
        type: [ Number, String ],
        default: '25%',
      }
    },
    computed: {
      curOption() {
        if(!this.eData) return null;
        const { xName, yName, xData, yData } = this.eData;
        if(!isArray(xData) || !isArray(yData)) return null;

        let _serie = {
          name: '',
          data: [],
          type: 'line',
          barWidth: this.barWidth,
          coordinateSystem: 'cartesian2d',
        };

        let _tempOption = {
          title: {
            show: this.title ? true : false,
            text: this.title || ''
          },
          legend: {  // 等于 series name 的集合
            data: []
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b} <br/> {a} : {c}'
          },
          xAxis: {
            name: xName,
            type: 'category',
            data: xData,
            axisLabel : {  //坐标轴刻度标签的相关设置。
              interval: 0,
              rotate: this.xLabelRotate ? 45 : 0
            }
          },
          yAxis: {
            name: yName,
            type: 'value',
            axisLabel : {  //坐标轴刻度标签的相关设置。
              interval: 0,
              rotate: this.yLabelRotate ? 45 : 0
            }
          },
          series: []
        };

        yData.length > 0 && yData.forEach((itemObj) => {
          let newSerie = _.cloneDeep(_serie);
          newSerie.name = itemObj.name || '';
          newSerie.data = itemObj.data || [];
          if(itemObj.name) _tempOption.legend.data.push(itemObj.name);
          _tempOption.series.push(newSerie);
        });

        return _tempOption;
      },
    },
    methods: {
      initEcahrts() {
        this.$nextTick(() => {
          const chartDom = document.getElementById('echarts-basic-line-' + this.id);
          const myChart = window.echarts.init(chartDom);
          this.curOption && myChart.setOption(this.curOption);
        });
      },
    },
    watch: {
      curOption: {
        deep: true,
        handler() {
          this.initEcahrts();
        },
      },
    },
  }
</script>

<style lang="scss" scoped>
  // .echarts {
  //   width: 100%;
  //   height: 400px;
  // }

  .echarts-basic-line {
    height: 400px;
    margin: 50px 20px;
    padding: 20px;
    box-shadow: 5px 8px 12px #ebedf0;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.01);
    overflow: auto;
  }
</style>
